<template>
  <view class="previewImage" v-if="show" @tap="close">
    <view class="page" v-if="urls.length > 0">
      <text class="text">{{ current + 1 }} / {{ urls.length }}</text>
    </view>
    <swiper class="swiper" :current="current" @change="swiperChange" @touchstart="handleTouchStart"
      @touchend="handleTouchEnd">
      <swiper-item v-for="(item, index) in urls" :key="index">
        <movable-area class="movable-area" scale-area>
          <movable-view class="movable-view" direction="all" :inertia="true" damping="100" scale="true" scale-min="1"
            scale-max="4" :scale-value="scale">
            <scroll-view scroll-y="true" class="uni-scroll-view">
              <view class="scroll-view">
                <image :key="index" class="image" :src="item" mode="widthFix" @longpress="onLongpress(item)" />
              </view>
            </scroll-view>
          </movable-view>
        </movable-area>
      </swiper-item>
    </swiper>
  </view>
</template>

<script setup lang="ts">
const props = defineProps({
  urls: {
    type: Array,
    required: true,
    default: () => {
      return [];
    }
  }
})
const emit = defineEmits(['open', 'close', 'onLongpress'])
const show = ref(false)
const current = ref(0) //当前页
const scale = ref(1)
const isZooming = ref(false) // 是否处于缩放状态
function open(url) {
  current.value = props.urls.findIndex(item => item === url);
  show.value = true;
  emit('open');
}
//关闭
function close() {
  if (!isZooming.value) {
    show.value = false;
    current.value = 0;
    emit('close');
  }
}
//图片改变
function swiperChange(e) {
  current.value = e.detail.current;
}
//监听长按
function onLongpress(e) {
  emit('onLongpress', e);
}
function handleTouchStart() {
  isZooming.value = true;
}
function handleTouchEnd() {
  isZooming.value = false;
}
defineExpose({
  open,
  close,
})
// props: {
// 	urls: {
// 		type: Array,
// 		required: true,
// 		default: () => {
// 			return [];
// 		}
// 	}
// },
// data() {
// 	return {
// 		show: false,
// 		current: 0, //当前页
// 		scale: 1,
// 		isZooming: false // 是否处于缩放状态
// 	};
// },
// methods: {
//   //打开
//   open(current) {
//     this.current = this.urls.findIndex(item => item === current);
//     this.show = true;
//     this.$emit('open');
//   },
//   //关闭
//   close() {
//     if (!this.isZooming) {
//       this.show = false;
//       this.current = 0;
//       this.$emit('close');
//     }
//   },
//   //图片改变
//   swiperChange(e) {
//     this.current = e.detail.current;
//   },
//   //监听长按
//   onLongpress(e) {
//     this.$emit('onLongpress', e);
//   },
//   handleTouchStart() {
//     this.isZooming = true;
//   },
//   handleTouchEnd() {
//     this.isZooming = false;
//   }
// }
</script>

<style lang="scss" scoped>
.previewImage {
  z-index: 9999;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000000;

  .swiper {
    width: 100%;
    height: 100vh;

    swiper-item {
      .movable-area {
        height: 100%;
        width: 100%;

        .movable-view {
          width: 100%;
          min-height: 100%;

          .uni-scroll-view {
            height: 100vh;
          }

          .scroll-view {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;

            .image {
              width: 100%;
              height: auto;
            }
          }
        }
      }
    }
  }

  .page {
    position: absolute;
    z-index: 9999;
    width: 100%;
    top: 60rpx;
    text-align: center;

    .text {
      color: #fff;
      font-size: 32rpx;
      background-color: rgba(0, 0, 0, 0.5);
      padding: 3rpx 16rpx;
      border-radius: 20rpx;
      user-select: none;
    }
  }
}
</style>
